@import "common.less";

.home{
  position: absolute;width:100%;height: 100%;background: url("../img/bg.jpg") #1b1a39 no-repeat;background-size: 100%;
  .day{position: absolute;width: 28%;top: 40/@rem;left: 36%;}
  .center{position: absolute;width: 44%;left: 28%;top: 15%;
    img{animation: topBottom 4s infinite;}
  }
  .text{position: absolute;bottom: -30%;width: 100%;left: 0;color: #709de7;text-align: center;font-size: 26/@rem;
    p{margin-top: 20/@rem;
      a{color: #fff;font-size: inherit;text-decoration: underline;}
    }
  }
  .home-btn{position: absolute;bottom: 130/@rem;left: 40/@rem;right: 40/@rem;}
  .logo-bottom{position: absolute;height: 54/@rem;bottom: 50/@rem;width: 86%;left: 7%;}

  .star{
    span{position:absolute; width:20/@rem; height:20/@rem; animation: starbling 2s linear infinite;
      &.star1{background:url("../img/star1.png") 0 0/contain; width:30/@rem; height:30/@rem; opacity:0.5; top:45%; left:25%; animation-delay: .5s;}
      &.star2{background:url("../img/star2.png") 0 0/contain; top:60%; left:15%; opacity:0.3; animation-delay: 1.5s;}
      &.star3{background:url("../img/star3.png") 0 0/contain; width:30/@rem; height:30/@rem; top:20%; left:30%;}
      &.star4{background:url("../img/star4.png") 0 0/contain; top:20%; left:75%; opacity:0.3; animation-delay: 1s;}
    }
  }
}

@keyframes starbling {
  0%,100%{
    opacity:0.3;
  }
  50%{
    opacity:1;
  }
}
